<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>
<div class="container bg" id="info">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <a id="followes">
                    <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                        <div>
                            <span render-html="personalInterface.follow"></span>
                        </div>
                        <div>
                            <span>关注</span>
                        </div>
                    </div>
                </a>
                <a id="fans">
                    <div class="col-2">
                        <div>
                            <span render-html="personalInterface.fans"></span>
                        </div>
                        <div>
                            <span>粉丝</span>
                        </div>
                    </div>
                </a>
                <div class="col">
                    <!--<button class="btn btn-outline-light" id="letterBtn">私信</button>-->
                    <button class="btn btn-success fBtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item" id="travel">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span id="travelsCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span id="commentCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                        <a render-key="list.id" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right" id="likeBtn">
									<span id="likeCount"></span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                        </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <!--<input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">-->
            <div render-loop="list">
                <!--<dl class="list" render-loop="list">-->
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.commentator.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star"><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                                class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>
                        <span class="comment-date" render-html="list.time"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                        <!--<ul class="comment-img">
                            <li>
                                <img src="/upload/63bb765d-5dff-44f8-b7f1-cb338b9b9f95.jpeg">
                            </li>
                            <li>
                                <img src="/upload/7d437f8d-a476-465c-bd84-e93a03d8efd5.jpeg">
                            </li>
                        </ul>-->

                        <div class="comment-link">
                            <a render-key="list.allComments.id" render-fun="handle" data-id="2" class="comment_a">
                                <img render-src="list.allComments.coverUrl"> <span>点击查看评论所属详情</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <!--</dl>-->
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>

</div>
<script>

    var currentPage = 1; // 当前页
    var pages; // 总页数
    var travels; // 当前页面的所有游记对象
    var comments; // 当前页面的所有评论对象
    var id = getParams().id; // 获取用户id
    var commentPages = 5;
    var user = JSON.parse(sessionStorage.getItem("user"));
    var user = JSON.parse(sessionStorage.getItem("user"));
    var goodId;

    $(function () {


        if (user) {
            if (id == user.id) {
                $("#letterBtn").attr("style", "display:none");
                $("#followBtn").attr("style", "display:none");
            }
            $.get("/users/" + user.id + "/follow/" + id, function (data) {
                if (data.success) {
                    $(".fBtn").html("已关注");
                } else {
                    $(".fBtn").html("关注");
                }
            });
        }

        $("#followBtn").click(function () {

            if (user) {

                // 查询是否已经关注, 从而进行判断进行关注或者取消关注操作
                $.get("/users/" + user.id + "/follow/" + id, function (data) {
                    /*if (data.success) {
                     $(".fBtn").html("已关注");
                     } else {
                     $(".fBtn").html("关注");
                     }*/
                    //$("#followBtn").click(function () {
                    var user = JSON.parse(sessionStorage.getItem("user"));
                    if (data.success) {
                        // 点击取消关注
                        $.ajax({
                            url: "/users/" + user.id + "/follow/" + id,
                            type: "DELETE",
                            success: function (data) {
                                // 1.更新本地缓存
                                $(document).dialog({
                                    type: "confirm",
                                    style: "IOS",
                                    titleShow: false,
                                    content: "你已取消对TA的关注",
                                    buttons: [{
                                        name: "确定",
                                        callback: function () {
                                            // 2.回到个人信息界面
                                            location.href = "/userProfiles.html?id=" + id;
                                        }
                                    }]
                                });
                            }
                        });
                    } else {
                        // 点击关注
                        $.ajax({
                            url: "/users/" + user.id + "/follow/" + id,
                            type: "PUT",
                            success: function (data) {
                                // 1.更新本地缓存
                                $(document).dialog({
                                    type: "confirm",
                                    style: "IOS",
                                    titleShow: false,
                                    content: "关注成功!",
                                    buttons: [{
                                        name: "确定",
                                        callback: function () {
                                            // 2.回到个人信息界面
                                            location.href = "/userProfiles.html?id=" + id;
                                        }
                                    }]
                                });
                            }
                        });
                    }
                    //});
                });
            } else {
                $.ajax({
                    success: function () {
                        // 1.更新本地缓存
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            titleShow: false,
                            content: "阁下还未登录!",
                            buttons: [{
                                name: "确定",
                                callback: function () {
                                    // 2.回到个人信息界面
                                    location.href = "/login.html";
                                }
                            }]
                        });
                    }
                });
            }
        });

        // 跳转到粉丝界面
        $("#fans").prop("href", "/fan.html?id=" + id);
        // 跳转到关注界面
        $("#followes").prop("href", "/follow.html?id=" + id);

        // 根据评论人的 id 显示TA一共有多少条评论
        $.get("/comments/" + id + "/getCount", function (count) {
            $("#commentCount").html(count);
        });

        // 根据评论人的 id 查看所有TA的评论
        $.get("/comments/" + id + "/getCommentAllByUserId", function (data) {
            var c = 0;
            $("#comments").renderValues(data, {
                // 属性名就是函数的名称
                handle: function (ele, value) {
                    console.log(data.list.length);
                    if (c < data.list.length) {
                        if (data.list[c].travel) {

                            $(ele).attr("href", "/travelContent.html?id=" + value);
                        } else if (data.list[c].strategy) {
                            $(ele).attr("href", "/strategyCatalogs.html?strategyId=" + value);
                        } else if (data.list[c].news) {
                            $(ele).attr("href", "/newsContent.html?id=" + value);
                        } else {
                            $(ele).attr("href", "/hotelContent.html?id=" + value);
                        }
                        c++
                    }
                }
            });
            commentPages = data.pages;
            comments = data.list;
        }, "json");
        // 当屏幕滚动到最底部时执行函数
        $(window).scroll(function () {
            // 判断是否到底部
            if (isEnd()) {
                // 判断是否有下一页
                if (currentPage < commentPages) {
                    // currentPage +1 , 发送ajax请求获取下一页到游记
                    currentPage++;
                    $.get("/comments/" + id + "/getCommentAllByUserId", {
                        currentPage: currentPage
                    }, function (data) {
                        // 返回的数据只有翻页后的数据，没有当前页的数据，直接渲染原来的数据就没有了
                        // 原来的数据+当前的数据
                        $.merge(comments, data.list);
                        var i = 0;
                        $("#comments").renderValues({list: comments}, {
                            // 属性名就是函数的名称
                            handle: function (ele, value) {
                                var travel = comments[i].travel;
                                var strategy = comments[i].strategy;
                                var news = comments[i].news;
                                var hotel = comments[i].hotel;
                                if (travel) {
                                    $(ele).attr("href", "/travelContent.html?id=" + value);
                                } else if (strategy) {
                                    $(ele).attr("href", "/strategyCatalogs.html?strategyId=" + value);
                                } else if (news) {
                                    $(ele).attr("href", "/newsContent.html?id=" + value);
                                } else {
                                    $(ele).attr("href", "/hotelContent.html?id=" + value);
                                }
                                i++;
                            }
                        });
                    }, "json");
                } else {
                    $(document).dialog({
                        type: "notice",
                        infoText: "已经到底部了",
                        autoClose: 2500,
                        position: "bottom"
                    });
                }
            }
        });

        // 通过id 获取user
        $.get("/users/" + id, function (user) {
            // 背景渲染
            $("#info").attr("style", "background-image:url('" + user.coverImgUrl + "')");
        });

        // 个人信息渲染
        if (id) {
            //
            $.get("/users/" + id + "/fansOrFollow", function (data) {
                //
                $("#info").renderValues(data);
            });
        }

        // 根据用户 id 查询TA的游记总数量
        $.get("/users/" + id + "/travelCount", function (count) {
            $("#travelsCount").html(count);
        });

        // 游记渲染
        $.get("/users/" + id + "/travels", {pageSize: 5}, function (data) {
            console.log(data);
            // 把返回的数据渲染到界面
            renderView(data);
            // 返回的data是pageInfo对象，包含了翻页需要用到的数据
            pages = data.pages;
            travels = data.list;

//            getGoodId(data);

        }, "json");

//        $("#likeBtn").click(function () {
//            if (user) {
//                // 检查用户是否可以点赞
//                $.get("/users/" + user.id + "/addGoods/" + goodId, function (data) {
//                    if (data.success) {
//                        $.post("/addGoods/" + goodId, function (data) {
//                            if (data.success) {
//                                $("#likeState").html("已点赞");
//                                // 渲染点赞数量
//                                getCount(goodId);
//                            }
//                        });
//                    } else {
//                        $.ajax({
//                            url: "/addGoods/" + goodId,
//                            type: "DELETE",
//                            success: function (data) {
//                                $("#likeState").html("点赞");
//                                // 渲染点赞数量
//                                getCount(goodId);
//                            }
//                        })
//                    }
//                });
//            } else {
//                // 跳转到登录界面
//                $(document).dialog({
//                    type: "confirm",
//                    style: "ros",
//                    titleShow: false,
//                    closeBtnShow: true,
//                    content: "登录后才可以进行点赞",
//                    buttons: [
//                        {
//                            name: "跳转到登陆界面",
//                            callback: function () {
//                                location.href = "/login.html";
//                            }
//                        },
//                        {
//                            name: "取消",
//                            callback: function () {
//                            }
//                        }
//                    ]
//                });
//            }
//        });

        // 当屏幕滚动到最底部时执行函数
        $(window).scroll(function () {
            // 判断是否到底部
            if (isEnd()) {
                // 判断是否有下一页
                if (currentPage < pages) {
                    // currentPage +1 , 发送ajax请求获取下一页到游记
                    currentPage++;
                    $.get("/users/" + id + "/travels", {currentPage: currentPage, pageSize: 3}, function (data) {
                        // 返回的数据只有翻页后的数据，没有当前页的数据，直接渲染原来的数据就没有了
                        // 原来的数据+当前的数据

                        $.merge(travels, data.list);
                        renderView({list: travels});
                    }, "json");
                } else {
                    $(document).dialog({
                        type: "notice",
                        infoText: "已经到底部了",
                        autoClose: 2500,
                        position: "bottom"
                    });
                }
            }
        });
    });
    // 给.travels绑定渲染函数
    function renderView(data) {
        $("#travels").renderValues(data, {
            // 属性名就是函数的名称
            handle: function (ele, value) {
                $(ele).attr("href", "/travelContent.html?id=" + value);
            }
        });
    }

//    // 检查用户是否点赞
//    function checkAddGood(user, travelGoodId) {
//        // 点赞: 判断当前用户是否登录, 登录可点赞, 没登录不可以
//        if (user){
//            // 检查用户是否已经点赞
//            $.get("/users/" + user.id + "/addGoods/" + travelGoodId, function (data) {
//                if (data.success) {
//                    $("#likeState").html("点赞");
//                } else {
//                    $("#likeState").html("已点赞");
//                }
//            });
//        }
//    }
//
//    // 获取当前内容点赞数量
//    function getCount(goodId) {
//        $.get("/addGoods/" + goodId + "/counts", function (data) {
//            // 显示点赞数量
//            $("#likeCount").html(data);
//        });
//    }
//
//    // 获取点赞id
//    function getGoodId(data) {
//        $.each(data.list, function (index, ele) {
//            // 点赞
//            goodId = ele.goodId;
//            // 检查用户是否点赞
//            checkAddGood(user, goodId);
//            // 渲染点赞数量
//            getCount(goodId);
//        })
//    }
</script>
</body>
</html>